<template>
  <div id="map"></div>
</template>

<script>
import 'echarts/map/js/province/zhejiang'
import 'echarts/map/js/china'
export default {
  name: 'Map',
  data() {
    return {
      pieces: [
        [
          { gte: 3000, label: '>3000', color: '#1346a0' },
          { gte: 2500, lt: 3000, label: '2500 - 3000', color: '#325daa' },
          { gte: 1800, lt: 2500, label: '1800 - 2500', color: '#3b6da8' },
          { lt: 1800, label: '<1800', color: '#76a3c9' },
        ]
      ],
      type: 0,
      myChart: {},
      mapList:[]
    }
  },
  computed:{
    cityKey(){
      return function(areaCode){
        return areaCode - 3301
      }
    }
  },
  mounted() {
    this.getMapList();
  },
  methods: {
    createMap() {
      this.myChart = this.$echarts.init(document.getElementById('map'), 'dark')
      let option = {
        tooltip: { trigger: 'item' },
        visualMap: {
          show: true,
          left: 80,
          bottom: 120,
          showLabel: true,
          pieces: this.pieces[0],
        },
        geo: {
          map: '浙江',
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1.1,
          top: 80,
          left: 310,
          label: {
            normal: {
              show: true,
              fontSize: '12',
              color: 'rgba(0,0,0,0.7)',
            },
            emphasis: {
              areaColor: "rgb(164, 196, 223)"
            }
          },
          itemStyle: {
            normal: {
              borderColor: "",
              borderWidth: 0,
              areaColor: '',
              fontWeightL: 700,
            },
            emphasis: {
              areaColor: "rgb(164, 196, 223)"
            }
          }
        },
        series: [
          {
            name: '文化元素总数',
            type: 'map',
            map: '浙江',
            mapType: '浙江',
            geoIndex: 0,
            selectedMode : '',

            data: this.mapList,
          },
        ],
        backgroundColor: '', //设置无背景色
        grid: {
          y: 1,
          x2: -5,
          containLabel: true,
        },
      }


      /* option.series[0].data[0].selected = true; */
      this.myChart.setOption(option)

      this.myChart.on('click', (params) => {
        //console.log(params)
        /* option.series[0].data[0].selected = true; */
        /* this.myChart.setOption(option) */
        this.$city.city.some((i, index) => {
          if (i === params.name){
            this.$emit('changeCity', {
              value: params.value,
              name: params.name,
              city: 3301 + index + '%',
              impCount:params.data.impCount,
              overCount:params.data.overCount
            })
            return;
          }
        })
      })
    },

    getMapList(){
      this.$api.getCE({
        "CECode":''
      }).then(res=>{
        //console.log(res.data.data)
        if(res.data.code != 0) return
        this.mapList = res.data.data;
        let list = [];
        res.data.data.forEach(i=>{
          list.push({value:i['allCount'],name:this.$city.city[this.cityKey(i['areaCode'])],impCount:i.impCount,overCount:i.overCount});
        })
        this.mapList = list;
        this.createMap();
        this.$emit('changeCity', {
              ...list[0],
              city: '3301%',
            })
      })
    }
  },
}
</script>

<style>
#map {
  height: calc(100% - 76px);
}
</style>
